import styles from './TypesRegion.module.scss';
import AddCard from '../../AddCard/AddCard';
import { ROUTES } from '../../../utils/conts';
import { useDispatch, useSelector } from 'react-redux';
import { useEffect } from 'react';
import { getRegionTypestAll } from '../../../features/regionTypes/regionTypes';
import CardAccount from '../../CardAccount/CardAccount';
import CardTypes from '../../CardTypes/CardTypes';

const TypesRegion = () => {
  const dispatch = useDispatch();
  const { regionTypes, isLoading } = useSelector(({ regionTypes }) => regionTypes);
  useEffect(() => {
    dispatch(getRegionTypestAll());
  }, []);

  return (
    <div className={styles.typesRegion}>
      <h1 className={styles.title}>Тип региона</h1>
      <div className={styles.wrapper}>
        <AddCard link={ROUTES.CREATE_TYPES_REGION} />
        {isLoading ? (
          regionTypes.data.items.map((types) => (
            <CardTypes
            key={types.id}
            id={types.id}
            name={types.name}
            />
          ))
        ) : (
          <h1>Загурзка</h1>
        )}
      </div>
    </div>
  );
};

export default TypesRegion;
